<template>
  <div>
    <div class="tabsPc">
      <div :class="index == setTab ? 'item-selected' : 'item'" v-for="(item, index) in list" :key="index"
        @click="tabClick(index)">
        {{ item }}
      </div>

    </div>
  </div>
</template>

<script>

export default {
  components: {},
  props: {
    list: Array,
    i: Number,

  },
  watch: {
    i(newData) {
      this.setTab = newData;
    },
  },
  data() {
    return {
      setTab: 0,

    };
  },

  computed: {},
  created() { },
  mounted() { },
  methods: {

    tabClick(index) {
      this.setTab = index;
      this.$emit("change", this.setTab);
    },
  },
};
</script>
<style lang="scss" scoped>
.tabsPc {
  position: relative;
  display: flex;



  .item {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 31px;
    font-size: 20px;
   
    font-weight: 400;
    color: #333333;


  }

  .item-selected {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 181px;
    height: 31px;
    font-size: 20px;
   
    font-weight: 400;
    color: color.$base;

    background: url(../../../assets/image/product/tabs_bg.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;

  }

}
</style>